{% extends 'base.html' %}


{% block content %}
    <script>

        function favor(position, movieId, movieIndex) {
            $.ajax({
                type: "post",
                url: '/favor',
                data: JSON.stringify({
                    movie_id: movieId,
                }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                mode: 'same-origin',
                success: (res) => {
                    if (res.code === -1) {
                        // 未登录
                        myAlert(res.msg, 'warning');
                        return
                    }

                    if (res.code === 0) {
                        // 成功
                        {#debugger;#}

                        let nowFavorStatus = res.data

                        myAlert(res.msg, 'success');

                        // 刷新
                        // 在指定刷新的位置，更新 电影的喜欢状态
                        {#let dom = $(`.main_movie_list_favor:eq(${movieIndex})`);#}
                        location.reload();

                        return
                    }
                    myAlert(res.msg, 'danger');
                },
                error: function (err) {
                    console.error('error')
                    console.error(err)
                }
            })
        }

    </script>

    <div class="main-container" style="margin: 0 auto">
        {% for movie_item in li_favor_movie %}
            {% set movie_index = loop.index0 %}
        	{#                单个电影#}
            <div class="movies-block" title="{{ movie_item.desc }}">
                {#                左侧图片#}
                <a href="/details/{{ movie_item.id }}">
                    <img class="movie-left-block" src="{{ url_for('static',filename=movie_item.image_path) }}"
                         title="{{ movie_item.desc }}"
                         alt="">
                </a>
                {#                    右侧内容#}

                <div class="head-line">
                    <div class="movie-title" title="{{ movie_item.name }}">{{ movie_item.name }}</div>
                    <div class="movie-time">{{ movie_item.year }}</div>
                </div>

                {#喜欢#}
                <div style="position: absolute;top: 4px;left: 4px">
                    {% if session.user %}
                        <i class="{% if movie_item.get_user_favor_movie_status() %} fa fa-heart {% else %} fa fa-heart-o {% endif %} main_movie_list_favor"
                           style="color: #DC3545;cursor: pointer"
                           onclick="favor('main',{{ movie_item.id }},{{ movie_index }})"></i>
                    {% endif %}
                </div>
            </div>
            <hr style="margin: 0px">
        {% endfor %}

    </div>

    <style>

    .main-container {
        width: 1100px;
        margin: 8px 24px;
        display: flex;
        justify-content: flex-start;
    }


    .movies-block{
        position: relative;
        margin: 8px;
    }

    .movie-title{
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .movie-left-block {
        max-width: 180px;
        max-height: 180px;
        object-fit: cover;
        margin-right: 24px;
    }
    </style>
{% endblock content %}